<template>
  <div class='main'>
      <!--面包屑-->
      <div class='top'>
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item>项目群</el-breadcrumb-item>
          <el-breadcrumb-item>设备管理</el-breadcrumb-item>
          <el-breadcrumb-item>点位列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div>
        <el-card class='card'>
          <!--标题文字-->
          <div class='headerTitle'>
              <div>点位列表</div>
          </div>

          <div class='search'>
            <el-input
              v-model="input"
              placeholder="请输入点位名称搜索"
              :suffix-icon="Search"
              style="width:300px"
              @keyup.enter="getSpotList"
            />
            <el-button class='addbtn' @click="(addVisible = true)">新建点位</el-button>
          </div>

          <div class='table' style='padding:0 20px'>
            <el-table :data="state.tableData" border :header-cell-style="{background:'#b4c7e7',color:'black',fontSize:'12px',fontWeight:'500'}">

              <el-table-column prop="spot_name" label="点位名称" align="center" width="180" />

              <el-table-column prop="spot_type" label="点位类型" align="center" width="180" />

              <el-table-column prop="manufactor" label="厂家" align="center" width="180" />

              <el-table-column prop="signal" label="通讯方式" align="center" width="180" />

              <el-table-column prop="agreement" label="协议方式" align="center" width="180" />

              <el-table-column prop="sensor" label="传感器编码" align="center" width="180"  />

              <el-table-column prop="gateway" label="所属网关" align="center" width="180"  />

              <el-table-column prop="product_name" label="所属设备" align="center" width="180"  />

              <el-table-column prop="region_name" label="区域选择" align="center" width="180"  />

              <el-table-column label="操作" align="center">
                <template v-slot='scope'>
                    <span class='edit' @click="handleEdit(scope.row)">编辑</span>
                    <span class='dell' @click="handleDell(scope.row.id)">删除</span>
                </template>
              </el-table-column>

            </el-table>
          </div>

          <div>
            <el-dialog
              v-model="addVisible"
              title="新建点位"
              width="30%"
              :before-close="handleClose"
            >
              <el-divider class='line' />

              <el-form>

                <el-form-item label="点位名称" class='lineheight'>
                  <el-input v-model="state.form.spot_name" placeholder="请输入产品名称" input-style="margin-left:15px"/>
                </el-form-item>

                 <el-form-item label="点位类型" class='lineheight'>
                    <el-input v-model="state.form.spot_type" placeholder="请输入点位类型" input-style="margin-left:15px"/>
                </el-form-item>

                <el-form-item label="厂家" class='lineheight'>
                  <el-input v-model="state.form.manufactor" placeholder="请输入点位厂家" input-style="width:352px;margin-left:43px"/>
                </el-form-item>

                <el-form-item label="通信方式" class='lineheight'>
                  <el-input v-model="state.form.signal" placeholder="请输入通信方式" input-style="margin-left:15px"/>
                </el-form-item>

                <el-form-item label="区域选择" class='lineheight'>
                    <el-select v-model="state.form.region_id" placeholder="请选择区域" style="margin-left:15px;width:352px">
                        <el-option
                        v-for="item in state.areaList"
                        :key="item.id"
                        :label="item.region_name"
                        :value="item.id"
                        />
                    </el-select>
                </el-form-item>

                <el-form-item label="协议方式" class='lineheight'>
                  <el-input v-model="state.form.agreement" placeholder="请输入协议方式" input-style="margin-left:15px" />
                </el-form-item>

                 <el-form-item label="传感器编码" class='lineheight'>
                  <el-input v-model="state.form.sensor" placeholder="请输入传感器编码"/>
                </el-form-item>

                <el-form-item label="所属网关" class='lineheight'>
                  <el-input v-model="state.form.gateway" placeholder="请输入所属网关"  input-style="margin-left:15px"/>
                </el-form-item>

                <el-form-item label="所属设备" class='lineheight'>
                  <el-select v-model="state.form.device_id" placeholder="请选择所属设备" style="margin-left:15px;width:352px">
                        <el-option
                        v-for="item in state.deviceList"
                        :key="item.id"
                        :label="item.product_name"
                        :value="item.id"
                        />
                    </el-select>
                </el-form-item>

              <el-divider class='ment'/>

              </el-form>
              
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="addVisible = false" class='cancle'>取消</el-button>
                  <el-button type="primary" @click="handleAddPoint" class='save'
                    >保存</el-button
                  >
                </span>
              </template>
            </el-dialog>
          </div>

          <div>
            <el-dialog
              v-model="editVisible"
              title="编辑点位"
              width="30%"
              :before-close="handleClose"
            >
              <el-divider class='line' />

                <el-form>

                <el-form-item label="点位名称" class='lineheight'>
                  <el-input v-model="state.upform.spot_name" placeholder="请输入产品名称" input-style="margin-left:15px"/>
                </el-form-item>

                 <el-form-item label="点位类型" class='lineheight'>
                    <el-input v-model="state.upform.spot_type" placeholder="请输入点位类型" input-style="margin-left:15px"/>
                </el-form-item>

                <el-form-item label="厂家" class='lineheight'>
                  <el-input v-model="state.upform.manufactor" placeholder="请输入点位厂家" input-style="width:352px;margin-left:43px"/>
                </el-form-item>

                <el-form-item label="通信方式" class='lineheight'>
                  <el-input v-model="state.upform.signal" placeholder="请输入通信方式" input-style="margin-left:15px"/>
                </el-form-item>

                <el-form-item label="区域选择" class='lineheight'>
                    <el-select v-model="state.upform.region_id" placeholder="请选择区域" style="margin-left:15px;width:352px">
                        <el-option
                        v-for="item in state.areaList"
                        :key="item.id"
                        :label="item.region_name"
                        :value="item.id"
                        />
                    </el-select>
                </el-form-item>

                <el-form-item label="协议方式" class='lineheight'>
                  <el-input v-model="state.upform.agreement" placeholder="请输入协议方式" input-style="margin-left:15px" />
                </el-form-item>

                 <el-form-item label="传感器编码" class='lineheight'>
                  <el-input v-model="state.upform.sensor" placeholder="请输入传感器编码"/>
                </el-form-item>

                <el-form-item label="所属网关" class='lineheight'>
                  <el-input v-model="state.upform.gateway" placeholder="请输入所属网关"  input-style="margin-left:15px"/>
                </el-form-item>

                <el-form-item label="所属设备" class='lineheight'>
                  <el-select v-model="state.upform.device_id" placeholder="请选择所属设备" style="margin-left:15px;width:352px">
                        <el-option
                        v-for="item in state.deviceList"
                        :key="item.id"
                        :label="item.product_name"
                        :value="item.id"
                        />
                    </el-select>
                </el-form-item>

              <el-divider class='ment'/>

              </el-form>
              
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="editVisible = false" class='cancle'>取消</el-button>
                  <el-button type="primary" @click="handleEditPoint" class='save'
                    >保存</el-button
                  >
                </span>
              </template>
            </el-dialog>
          </div>

          <div class='page'>
            <el-pagination
              v-model:currentPage="currentPage"
              v-model:page-size="pageSize"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="prev, pager, next, jumper"
              :total="1000"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </div>
  </div>
</template>

<script setup>
import { onMounted, reactive , ref} from 'vue'
import { Search } from '@element-plus/icons-vue'
import { SpotList, AddSpot, EditSpot, DeleteSpot, DeviceListSpot, AreaListSpot } from "@/api/model/equipment/point"

const input = ref('')

const currentPage = ref(5)

const pageSize = ref(100)

const addVisible = ref(false)

const editVisible = ref(false)


const state = reactive({
  // 列表数据
  tableData: [],

  // 设备列表
  deviceList: [],

  // 区域列表
  areaList: [],

  // 添加点位
  form: {},

  // 编辑点位
  upform: {},
})

onMounted(() => {
  getSpotList()
  getDeviceListSpot()
  getAreaListSpot()
})

// 获取点位列表
const getSpotList = async() => {
  let res = await SpotList({keyword: input.value})
  if(res.status == 200){
    state.tableData = res.data.data
  }
}

// 获取设备列表
const getDeviceListSpot = async() => {
  let res = await DeviceListSpot()
  if(res.status == 200){
    state.deviceList = res.data
  }
}

// 获取区域列表
const getAreaListSpot = async() => {
  let res = await AreaListSpot()
  if(res.status == 200){
    state.areaList = res.data
  }
}

// 添加点位
const handleAddPoint = async() => {
  let res = await AddSpot(state.form)
  if(res.status == 200){
    getSpotList()
    addVisible.value = false
  }
}

// 删除点位
const handleDell = async(e) =>{
  let res = await DeleteSpot({id :e})
  if(res.status == 200){
    getSpotList()
  }
}

const handleEdit = (e) =>{
    state.upform = e
    editVisible.value=true
}

// 编辑点位
const handleEditPoint = async() => {
  let res = await EditSpot(state.upform)
  if(res.status == 200){
    getSpotList()
    editVisible.value = false
  }
}

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}
</script>

<style scoped lang="less">
.main{
  height:100%;
  background-color:#eaf2fa;
  overflow: hidden;
}

.top{
  margin-left: 30px;
  margin-top: 5px;
}

.card{
  width:100%;
  height: 550px;
  margin-top: 15px;
}
.card  :deep(.el-card__body){
    padding:0 !important;
  } 

:deep(.el-form-item__label){
    white-space:pre-line;
}

.edit{
  margin-right: 30px;
  font-size: 13px;
  color:#606fa6;
  cursor: pointer;
}

.dell{
  font-size: 13px;
  color:#fccb56;
  cursor: pointer;
}

.search{
  display:flex;
  padding:0 20px;
  justify-content: flex-end;
  margin-top:20px;
}

.addbtn{
  width:100px;
  height:30px;
  color:white;
  background-color: #8faadc;
  margin-left: 20px;
}

.table{
  margin-top: 15px;
  height:350px
}

:deep(.el-dialog__title) {
  color:#7b6ea5;
  letter-spacing: 1px;
}

.line{
  position: absolute;
  top: 40px;
  left: 0px;
}

.el-form-item__label{
    white-space:pre-line;
}

.upload{
  margin-left: 370px;
}

.ment{
  position: absolute;
  top: 420px;
  left: 0px;
}

.lineheight{
  height:20px
}

.page{
  margin-left: 950px;
  margin-top: 10px;
}

.cancle{
  background-color:#cccccc;
  color: white;
  width: 100px;
}

.save{
  background-color:#8faadc;
  color: white;
  width: 100px;
}
</style>
